import React from "react";
import Link from "next/link";
import {
  Box,
  Group,
  Tooltip,
  ActionIcon,
  Text,
  Divider,
  Tabs,
  TabsList,
  TabsPanel,
  TabsTab,
} from "@mantine/core";
import {
  IconChartBar,
  IconChevronsLeft,
  IconDatabase,
  IconLayoutBoardSplit,
} from "@tabler/icons-react";

import {IpdFrame} from "./components/IpdFrame";
import {IpdSlot} from "./components/IpdSlot";
import {IpdPort} from "./components/IpdPort";
import classes from "./page.module.css";
import {PannelCheck} from "./components/PannelCheck";
import {PannelExport} from "./components/PannelExport";
import {IpdSimuStatistic} from "../../../relay-simulation/(empty-layout)/step3/components/Statistic/IpdSimuStatistic";

export default function Page() {
  return (
    <>
      {/* 第一层：顶部信息和导航 */}
      <Box className={classes.box}>
        <Group>
          <Tooltip withArrow label="返回列表" position="left">
            <ActionIcon variant="default" component={Link} href="xxx">
              <IconChevronsLeft size={16} />
            </ActionIcon>
          </Tooltip>
          <Text size="sm" fw={500}>
            {"面板图展示页面"}
          </Text>
        </Group>
      </Box>
      {/* 第二层：配置信息 */}
      <Box className={classes.top}>
        <Group justify="space-between">
          <Group gap="xs">
            {/* 配置算法比重 */}
            <PannelCheck />
            {/* 纵向分割线 */}
            <Divider orientation="vertical" />
            {/* 配置算法比重 */}
            <PannelExport />
          </Group>
        </Group>
      </Box>

      {/* 第三层：页面主体内容 */}
      <Box>
        <Tabs color="violet" defaultValue="table">
          <TabsList>
            <TabsTab value="table" leftSection={<IconDatabase size={14} stroke={2} />}>
              面板数据表
            </TabsTab>
            <TabsTab value="visual" leftSection={<IconLayoutBoardSplit size={14} stroke={2} />}>
              面板可视化
            </TabsTab>
            <TabsTab value="statistic" leftSection={<IconChartBar size={14} stroke={2} />}>
              面板统计图
            </TabsTab>
          </TabsList>

          <TabsPanel value="table" p="md">
            一维表
          </TabsPanel>
          <TabsPanel value="visual" p="md">
            <IpdFrame>
              <IpdSlot name="槽位1">
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
              </IpdSlot>
            </IpdFrame>
          </TabsPanel>
          <TabsPanel value="visual" p="md">
            <IpdFrame>
              <IpdSlot name="槽位1">
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
                <IpdPort />
              </IpdSlot>
            </IpdFrame>
          </TabsPanel>
          <TabsPanel value="statistic" p="md">
            <IpdSimuStatistic />
          </TabsPanel>
        </Tabs>
      </Box>
    </>
  );
}
